<template>
    <!-- 顶部导航栏 -->
    <nav 
        class="fixed top-0 left-0 w-full z-50 transition-all duration-300 hover:bg-black/60" 
        :class="{'bg-black/80 backdrop-blur-md shadow-md': scrolled, 'bg-transparent': !scrolled}"
        @mouseenter="isHovered = true"
        @mouseleave="isHovered = false"
    >
        <div class="container mx-auto flex items-center justify-between py-6">
            <!-- 应用Logo -->
            <div @click="handleLogoClick" class="text-white font-light font-playball cursor-pointer text-4xl">
                {{ settings.app.title }}
            </div>
            
            <!-- 中间导航链接 -->
            <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="px-4 py-2 text-white hover:text-white/80 uppercase text-sm font-medium relative group hover:bg-white/10 transition-all">
                    Dresses 
                    <span class="ml-1">+</span>
                    <span class="absolute bottom-0 left-1/2 w-0 h-0.5 bg-rose-600 group-hover:w-full group-hover:left-0 transition-all duration-300"></span>
                </a>
                <a href="#" class="px-4 py-2 text-white hover:text-white/80 uppercase text-sm font-medium relative group hover:bg-white/10 transition-all">
                    Tops 
                    <span class="ml-1">+</span>
                    <span class="absolute bottom-0 left-1/2 w-0 h-0.5 bg-rose-600 group-hover:w-full group-hover:left-0 transition-all duration-300"></span>
                </a>
                <a href="#" class="px-4 py-2 text-white hover:text-white/80 uppercase text-sm font-medium relative group hover:bg-white/10 transition-all">
                    Bottoms 
                    <span class="ml-1">+</span>
                    <span class="absolute bottom-0 left-1/2 w-0 h-0.5 bg-rose-600 group-hover:w-full group-hover:left-0 transition-all duration-300"></span>
                </a>
                <a href="#" class="px-4 py-2 text-white hover:text-white/80 uppercase text-sm font-medium relative group hover:bg-white/10 transition-all">
                    Accessories 
                    <span class="ml-1">+</span>
                    <span class="absolute bottom-0 left-1/2 w-0 h-0.5 bg-rose-600 group-hover:w-full group-hover:left-0 transition-all duration-300"></span>
                </a>
                <a href="#" class="px-4 py-2 bg-rose-600 text-white rounded uppercase text-sm font-medium">
                    Sale
                </a>
                <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded uppercase text-sm font-medium flex items-center">
                    Sets <span class="ml-1">+</span>
                </a>
            </div>
            
            <!-- 右侧图标 -->
            <div class="flex items-center space-x-4 gap-4">
                <button class="text-white" @click="handleSearch">
                    <icon-park-search theme="outline" size="24" fill="currentColor" class="cursor-pointer hover:text-rose-600" />
                </button>
                <button class="text-white" @click="handleAddToCart">
                    <icon-park-mall-bag theme="outline" size="24" fill="currentColor" class="cursor-pointer hover:text-rose-600" />
                </button>
            </div>
        </div>

        <!-- 添加底部边线效果 -->
        <div class="container mx-auto relative">
            <div class="absolute bottom-0 left-0 w-full h-[1px] bg-neutral-800 transition-all duration-300 ease-out" :class="{'w-screen left-1/2 -translate-x-1/2': isHovered}"></div>
        </div>
    </nav>
    <Cart :visible="visibleCart" @close="visibleCart = false" side="right" />
    <GlobalSearch :visible="visibleSearch" @close="visibleSearch = false" side="right" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Search, MallBag } from '@icon-park/vue-next';
import settings from '@/constants/settings';
import Cart from '@/components/cart/index.vue';
import GlobalSearch from '@/components/search/index.vue';
export default defineComponent({
    name: 'GlobalHeader',
    components: {
        'icon-park-search': Search,
        'icon-park-mall-bag': MallBag,
        Cart,
        GlobalSearch
    },
    data() {
        return {
            /*
            * 是否滚动
            */
            scrolled: false,
            /*
            * 是否悬停
            */
            isHovered: false,
            /*
            * 购物车是否可见
            */
            visibleCart: false,
            /*
            * 搜索是否可见
            */
            visibleSearch: false
        }
    },
    setup() {
        return {
            settings
        }
    },
    mounted() {
        /*
        * 监听滚动事件
        */
        window.addEventListener('scroll', this.handleScroll);
    },
    beforeUnmount() {
        /*
        * 移除滚动事件
        */
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        /*
        * 滚动事件
        */
        handleScroll() {
            if (window.scrollY > 50) {
                this.scrolled = true;
            } else {
                this.scrolled = false;
            }
        },
        /*
        * 添加到购物车
        */
        handleAddToCart() {
            this.visibleCart = true;
        },
        /*
        * 搜索
        */
        handleSearch() {
            this.visibleSearch = true;
        },
        /*
        * 点击Logo
        */
        handleLogoClick() {
            this.$router.push('/');
        }
    }
});
</script>